<template>
    <div class="home-container">
        <div class="home-item">
            <div class="item-title">
                <span class="item-title-one">案件概览</span>
            </div>
            <div class="item-mbox">
                <div class="item-numbox">
                    <div class="item-numbox-num">{{casenum.monthNum}}</div>
                    <p class="item-numbox-title">本月完成案件</p>
                </div>
                <div class="item-numbox">
                    <div class="item-numbox-num">{{casenum.unfinNum}}</div>
                    <p class="item-numbox-title">未完成案件</p>
                </div>
                <div class="item-numbox">
                    <div class="item-numbox-num">{{casenum.allNum}}</div>
                    <p class="item-numbox-title">总完成案件</p>
                </div>
            </div>
        </div>
        <div class="home-item" style="height:360px;">
            <div class="item-title">
                <span class="item-title-one">数据概览</span>
                <div class="item-dataupdate">
                    <div class="datauodateA">年</div>
                    <div class="datauodateA">月</div>
                    <div class="datauodateA">日</div>
                </div>
            </div>
            <div class="item-echarts">
                <div id="item-echarts" style="width:100%;height:100%;"></div>
            </div>
        </div>
    </div>
</template>
<script>
import echarts from 'echarts/lib/echarts'
import 'echarts/lib/chart/bar';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/legend';
export default {
    name:'home',
    data(){
        return{
            casenum:{monthNum:9999,unfinNum:888,allNum:111},
            fincaseNum:[12,25,16,29,9,12,22]
        }
    },
    methods:{
        initData(){
            var myChart=echarts.init(document.getElementById('item-echarts'))
            myChart.setOption({
                color: ['#FF8C26'],
                orient: 'horizontal',
                tooltip : {
                    trigger: 'axis',
                },
                grid: {
                    left: '3%',
                    right: '3%',
                    bottom: '6%',
                    containLabel: true
                },
                xAxis : [
                    {
                        type : 'category',
                        data : ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
                        axisTick: {
                            alignWithLabel: true
                        }
                    }
                ],
                yAxis : [
                    {
                        type : 'value',
                        splitLine: {
                            show: false
                        }
                    }
                ],
                series : [
                    {
                        name:'结案数',
                        type:'bar',
                        barWidth: '30%',
                        data:this.fincaseNum
                    }
                ]
            })
        }
    },
    mounted(){
        this.initData()
    }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    @import "src/styles/mixin.scss";
    $bg:#F2F2F2;

    .home-container{
        width: 100%;
        min-height: 100vh;
        border: 1px solid $bg;
        box-sizing: border-box;
        background: $bg;
        .home-item{
            max-width: 1000px;
            height: 350px;
            background: white;
            box-shadow: 1px 1px 2px 1px #cccccc;
            margin-top: 30px;
            margin-left: 100px;
            padding: 0 20px;
            box-sizing: border-box;
            .item-title{
                width: 100%;
                height: 50px;
                display: flex;
                box-shadow: 0px 4px 2px -2px #cccccc;
                .item-title-one{
                    font-size: 15px;
                    font-family: Microsoft YaHei;
                    font-weight: Regular;
                    letter-spacing:1px;
                    line-height: 50px;
                }
                .item-dataupdate{
                    width: 150px;
                    height: 30px;
                    border: 1px solid red;
                    display: flex;
                    margin: 10px 40px;
                    .datauodateA{
                        width: 33.33%;
                        height: 100%;
                        text-align: center;
                        line-height: 100%;
                        border: 2px solid #546778;
                        box-sizing: border-box;
                    }
                }
            }
            .item-mbox{
                max-width: 92%;
                height: 120px;
                margin: 80px auto;
                display: flex;
                .item-numbox{
                    width: 33%;
                    border-left: 3px solid rgba(17,44,70,0.6);
                    box-sizing: border-box;
                    &:nth-of-type(1){
                        border: none;
                    }
                    .item-numbox-num{
                        text-align: center;
                        line-height: 80px;
                        font-size: 46px;
                        color: #E7715C;
                        font-size:46px;
                        font-family:Microsoft YaHei;
                        font-weight:400;
                        letter-spacing:1px;
                    }
                    .item-numbox-title{
                        text-align: center;
                        font-size:15px;
                        font-family:Microsoft YaHei;
                        font-weight:400;
                        line-height:20px;
                        color:rgba(17,44,70,1);
                        letter-spacing:1px;
                    }
                }
            }
            .item-echarts{
                width: 90%;
                height: 300px;
                margin: 10px auto;
            }

        }
    }
</style>